<template>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
  </template>
  
  <script setup>
  import { onMounted, onBeforeUnmount, ref ,toRefs,watch } from 'vue';
  import * as echarts from 'echarts';
  

  const props = defineProps({
    chartData_bar: {
      type: Object,
      default: () => ({
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [10, 52, 200, 334, 390, 330, 220]
      })
    }
  })
  const {chartData_bar}=toRefs(props)

  const chartRef = ref(null);  // 定义一个响应式引用，用于绑定 DOM 元素
  let myChart = null;  // 用于存储 ECharts 实例
  
  const option =()=>({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        name: '类别1' ,// 为 X 轴设置名称
        type: 'category',
        data: chartData_bar.value.xAxis,
        axisTick: {
          alignWithLabel: true // 刻度线与标签对齐
        }
      }
    ],
    yAxis: [
      {
        name: '类别2' ,// 为 X 轴设置名称
        type: 'value'
      }
    ],
   /*
   //条形图
    yAxis: [
      {
        name: '类别1' ,// 为 X 轴设置名称
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true // 刻度线与标签对齐
        }
      }
    ],
    xAxis: [
      {
        name: '类别2' ,// 为 X 轴设置名称
        type: 'value'
      }
    ],
*/

    series: [
      {
        name: '数据',
        type: 'bar',
        barWidth: '60%',
        data: chartData_bar.value.series
        //定义单个柱子的颜色
        // data: [10, 52, 200, 334, 390, {
        //   value: 330,
        //   itemStyle: {
        //     color: '#a90000'
        //   }
        // },220]
      }
    ]
  }) ;
  
  // 初始化图表
  onMounted(() => {
    myChart = echarts.init(chartRef.value);  // 初始化 ECharts 实例
    myChart.setOption(option());  // 应用配置
  });
  //监听对象
 watch( chartData_bar, () => {
    myChart.setOption({
      xAxis: [{data:chartData_bar.value.xAxis}],
      series:[{data: chartData_bar.value.series}]
    })
  });



  // 销毁图表
  onBeforeUnmount(() => {
    if (myChart) {
      myChart.dispose();  // 销毁 ECharts 实例
    }
  });
  </script>
  
  <style lang="scss" scoped>
  /* 可以根据需要添加样式 */
  </style>